<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
      xmlns:th = "http://www.thymeleaf.org">
<head>
    <title>Taco Cloud</title>
    <link rel = "stylesheet" th:href = "@{/styles.css}" />
</head>

<body>
<form method = "POST" th:action = "@{/orders}" th:object = "${tacoOrder}">
    <h1>Order your taco creations!</h1>

    <img th:src = "@{/images/TacoCloud.png}" th:style="'width: 300px; height: 200px;'"/>

    <h3>Your tacos in this order:</h3>
    <a th:href = "@{/design}" id = "another">Design another taco</a><br/>
    <ul>
        <li th:each = "taco : ${tacoOrder.tacos}">
            <span th:text = "${taco.name}">taco name</span></li>
    </ul>

    <h3>Deliver my taco masterpieces to...</h3>
    <label for = "deliveryName">Name: </label>
    <input type = "text" th:field = "*{deliveryName}"/>
    <span th:if = "${#fields.hasErrors('deliveryName')}" th:errors = "*{deliveryName}">Name ERROR</span>
    <br/>

    <label for = "deliveryStreet">Street address: </label>
    <input type = "text" th:field = "*{deliveryStreet}"/>
    <span th:if = "${#fields.hasErrors('deliveryStreet')}" th:errors = "*{deliveryStreet}">Street ERROR</span>
    <br/>

    <label for = "deliveryCity">City: </label>
    <input type = "text" th:field = "*{deliveryCity}"/>
    <span th:if = "${#fields.hasErrors('deliveryCity')}" th:errors = "*{deliveryCity}">City ERROR</span>
    <br/>

    <label for = "deliveryState">State: </label>
    <input type = "text" th:field = "*{deliveryState}"/>
    <span th:if = "${#fields.hasErrors('deliveryState')}" th:errors = "*{deliveryState}">State ERROR</span>
    <br/>

    <label for = "deliveryZip">Zip code: </label>
    <input type = "text" th:field = "*{deliveryZip}"/>
    <span th:if = "${#fields.hasErrors('deliveryZip')}" th:errors = "*{deliveryZip}">Zip ERROR</span>
    <br/>

    <h3>Here's how I'll pay...</h3>
    <label for = "ccNumber">Credit Card #: </label>
    <input type = "text" th:field = "*{ccNumber}"/>
    <span th:if = "${#fields.hasErrors('ccNumber')}" th:errors = "*{ccNumber}">CC ERROR</span>
    <br/>

    <label for = "ccExpiration">Expiration: </label>
    <input type = "text" th:field = "*{ccExpiration}"/>
    <span th:if = "${#fields.hasErrors('ccExpiration')}" th:errors = "*{ccExpiration}">Expiration ERROR</span>
    <br/>

    <label for = "ccCVV">CVV: </label>
    <input type = "text" th:field = "*{ccCVV}"/>
    <span th:if = "${#fields.hasErrors('ccCVV')}" th:errors = "*{ccCVV}">CVV ERROR</span>
    <br/>

    <input type = "submit" value = "Submit Order"/>
</form>
</body>
</html>